<script setup lang="ts">
import type { SysMenuReq, SysMenuResp } from '#/type/sys_menu';

import { onBeforeMount, reactive, ref, toRaw } from 'vue';

import {
  Button,
  Col,
  Form,
  FormItem,
  Input,
  message,
  Popconfirm,
  RangePicker,
  Row,
  Select,
  SelectOption,
  Table,
} from 'ant-design-vue';

import { createEditMenuApi, deleteMenuApi, getMenuListApi } from '#/api';
import { antTreeTableHandler } from '#/utils/antTools';

import ModalBox from './modalBox.vue';
import useFormHook from './useFormHook';
import useTableHook from './useTableHook';
// 设置组件 name
defineOptions({
  name: 'SysMenu',
});
// ------------------ 表单数据 ----------------------
const formSearch = reactive<SysMenuReq>({});
// ------------------ 表格数据 ----------------------

// 表格数据
const tableData = ref<SysMenuResp[]>([]);
// 获取表格数据
const fetchMenuListData = (search: SysMenuReq) => {
  getMenuListApi(search).then((res) => {
    tableData.value = antTreeTableHandler(
      res as SysMenuResp[],
      'menu_id',
      'parent_id',
    );
  });
};

const fetchTableData = () => {
  fetchMenuListData({ ...toRaw(formSearch) });
};

// fetchTableData(params)
// ------------------ 其他数据 ----------------------
const modalOpen = ref(false);
const modalData = ref<SysMenuResp | undefined>(undefined);
const menuList = ref<SysMenuResp[]>([]);

const fetchAllMenu = () => {
  getMenuListApi({}).then((res) => {
    menuList.value = res as SysMenuResp[];
  });
};

const saveMenu = (entity: SysMenuResp) => {
  createEditMenuApi(entity).then(() => {
    fetchTableData();
    modalOpen.value = false;
    message.success('成功');
  });
};
const deleteMenu = (ids: Array<string>) => {
  deleteMenuApi(ids).then(() => {
    fetchTableData();
    message.success('成功');
  });
};

const { tableColumns } = useTableHook();
const {
  formSearchSubmit,
  formSearchReset,
  formInputClear,
  formSelectClear,
  formDateRangeClear,
} = useFormHook(fetchTableData, formSearch);

// 生命周期函数，获取数据
onBeforeMount(() => {
  fetchTableData();
  fetchAllMenu();
});

const modalBoxShow = (record: null | SysMenuResp = {}) => {
  modalData.value = record || ({} as SysMenuResp);
  modalOpen.value = true;
};
const modalBoxSubmit = (entity: SysMenuResp) => {
  saveMenu(entity);
};
const tableRecordDelete = (record: SysMenuResp) => {
  deleteMenu([record.menu_id as string]);
};
</script>

<template>
  <div>
    <Row>
      <Col :span="24" class="mx-5 mt-4 h-12 w-full">
        <Form class="flex justify-start" layout="inline">
          <FormItem label="名称">
            <Input
              v-model:value="formSearch.menu_name"
              allow-clear
              placeholder="请输入名称"
              @change="formInputClear('menu_name', $event)"
            />
          </FormItem>
          <FormItem label="编码">
            <Input
              v-model:value="formSearch.menu_code"
              allow-clear
              placeholder="请输入编码"
              @change="formInputClear('menu_code', $event)"
            />
          </FormItem>
          <FormItem label="状态">
            <Select
              v-model:value="formSearch.status"
              allow-clear
              placeholder="请选择状态"
              @change="formSelectClear('status', $event)"
            >
              <SelectOption :value="1">正常</SelectOption>
              <SelectOption :value="0">禁用</SelectOption>
            </Select>
          </FormItem>
          <FormItem label="创建时间">
            <RangePicker
              v-model:value="formSearch.create_time_range"
              allow-clear
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="
                (dates, dateStrings) =>
                  formDateRangeClear('create_time_range', dates, dateStrings)
              "
            />
          </FormItem>
          <FormItem class="flex justify-around">
            <Button class="bg-blue-500" @click="formSearchSubmit">查询</Button>
            <Button class="bg-gray-300" @click="formSearchReset">重置</Button>
            <Button class="bg-red-300" @click="modalBoxShow(null)">新建</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>
    <Row class="mx-5 h-full">
      <Col :span="24" class="h-full">
        <Table :columns="tableColumns" :data-source="tableData">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <div class="flex justify-evenly">
                <Button type="text" @click="modalBoxShow(record)">编辑</Button>
                <Popconfirm
                  cancel-text="取消"
                  ok-text="确定"
                  title="确定删除吗？"
                  @confirm="() => tableRecordDelete(record)"
                >
                  <Button danger type="text">删除</Button>
                </Popconfirm>
              </div>
            </template>
          </template>
        </Table>
      </Col>
    </Row>
    <ModalBox
      :data="modalData"
      :menu-list="menuList"
      :open="modalOpen"
      @cancel="modalOpen = false"
      @ok="modalBoxSubmit"
    />
  </div>
</template>

<style scoped></style>
